﻿@page "/circular-gauge/circular-gauge-legend"

@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
     <p>This sample visualizes moving air types based on their speed in the legend of the circular gauge component. The visibility, shape, alignment, and position of the legend can be changed using the properties panel options. </p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render a legend in circular gauge. A legend item denotes the ranges in the axis. Any number of items can be added to a legend. You can bind the desired colors and legend text to the corresponding ranges.</p>
   <p> More information on the legend can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/legend'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfCircularGauge Title="Measure of wind speed in Km/h">
        <CircularGaugeLegendSettings Shape="@LegendShapeValue" Alignment="@LegendAlignValue" ToggleVisibility="@ToggleLegend" Visible="@EnableLegend" Position="@LegendValue"/>
        <CircularGaugeAxes>
            <CircularGaugeAxis StartAngle="210" EndAngle="150" Minimum="0" Maximum="120" Radius="80%">
                <CircularGaugeAxisLineStyle Width="2"/>
                <CircularGaugeAxisLabelStyle Position="Position.Inside" UseRangeColor="false">
                    <CircularGaugeAxisLabelFont Size="12px" FontFamily="Roboto" FontStyle="Regular" Color="#424242"/>
                </CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisMajorTicks Height="16" Color="#9E9E9E" Interval="20"/>
                <CircularGaugeAxisMinorTicks Height="8" Interval="10"/>
                <CircularGaugeRanges>
                    <CircularGaugeRange Start="0" End="5" Color="#ccffff" Radius="110%" LegendText="Light air"/>
                    <CircularGaugeRange Start="5" End="11" Color="#99ffff" Radius="110%" LegendText="Light Breeze"/>
                    <CircularGaugeRange Start="11" End="19" Color="#99ff99" Radius="110%" LegendText="Gentle Breeze"/>
                    <CircularGaugeRange Start="19" End="28" Color="#79ff4d" Radius="110%" LegendText="Moderate Breeze"/>
                    <CircularGaugeRange Start="28" End="49" Color="#c6ff1a" Radius="110%" LegendText="Strong Breeze"/>
                    <CircularGaugeRange Start="49" End="74" Color="#e6ac00" Radius="110%" LegendText="Gale"/>
                    <CircularGaugeRange Start="74" End="102" Color="#ff6600" Radius="110%" LegendText="Storm"/>
                    <CircularGaugeRange Start="102" End="120" Color="#ff0000" Radius="110%" LegendText="Hurricane force"/>
                </CircularGaugeRanges>
                <CircularGaugePointers>
                    <CircularGaugePointer Value="70" PointerWidth="8" Color="#757575" Radius="60%">
                        <CircularGaugePointerAnimation Enable="true"/>
                        <CircularGaugeCap Radius="7" Color="#757575"/>
                        <CircularGaugeNeedleTail Length="18%"/>
                    </CircularGaugePointer>
                </CircularGaugePointers>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
<div class="col-md-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%">
                <tr>
                    <td>
                        <div>Show legend</div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox ValueChange="@LegendChange" Checked="@LegendChecked" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="width:80%"> Show range when the legend item is toggled</div>
                    </td>
                    <td>
                        <div>
                            <SfCheckBox ValueChange="@ToggleLegendChange" Checked="@ToggleLegendChecked" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Position</div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList DataSource="@LegendPositions" @bind-Value="@PositionValue">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="LegendPositionList"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Alignment</div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList DataSource="@LegendAlignment" @bind-Value="@AlignmentValue">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="LegendAlignmentList"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Shape</div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList DataSource="@LegendShape" @bind-Value="@ShapeValue">
                                <DropDownListEvents TItem="DropdownList" TValue="string" ValueChange="ShapeList"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<style>
    tr {
        height:50px;
    }
    td {
        width: 40%;
    }
</style>

@code{
    private string PositionValue = "Bottom";
    public LegendPosition LegendValue = LegendPosition.Bottom;
    private string AlignmentValue = "Center";
    private Alignment LegendAlignValue = Alignment.Center;
    private string ShapeValue = "Circle";
    private GaugeShape LegendShapeValue = GaugeShape.Circle;
    private bool LegendChecked = true;
    private bool EnableLegend = true;
    private bool ToggleLegendChecked = true;
    private bool ToggleLegend = true;
    public class DropdownList {
        public string Value { get; set; }
        public string Name { get; set; }
    };
    public List<DropdownList> LegendPositions = new List<DropdownList> {
        new DropdownList { Value="Bottom", Name="Bottom" },
        new DropdownList { Value="Top", Name="Top" },
        new DropdownList { Value="Left", Name="Left" },
        new DropdownList { Value="Right", Name="Right" },
        new DropdownList { Value="Auto", Name="Auto" }
    };
    public List<DropdownList> LegendAlignment = new List<DropdownList> {
        new DropdownList { Value="Center", Name="Center" },
        new DropdownList { Value="Far", Name="Far" },
        new DropdownList { Value="Near", Name="Near" },
    };
    public List<DropdownList> LegendShape = new List<DropdownList> {
        new DropdownList { Value="Circle", Name="Circle" },
        new DropdownList { Value="Rectangle", Name="Rectangle" },
        new DropdownList { Value="Triangle", Name="Triangle" },
        new DropdownList { Value="Diamond", Name="Diamond" },
        new DropdownList { Value="Inverted Triangle", Name="Inverted Triangle" }
    };
    private void LegendChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        LegendChecked = args.Checked;
        EnableLegend = LegendChecked;
    }
    private void ToggleLegendChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        ToggleLegendChecked = args.Checked;
        ToggleLegend = ToggleLegendChecked;
    }
    private void LegendPositionList(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropdownList> args) {
        PositionValue = (args.Value).ToString();
        if (PositionValue == "Bottom") {
            LegendValue = LegendPosition.Bottom;
        }
        else if (PositionValue == "Top") {
            LegendValue = LegendPosition.Top;
        }
        else if (PositionValue == "Left") {
            LegendValue = LegendPosition.Left;
        }
        else if (PositionValue == "Right") {
            LegendValue = LegendPosition.Right;
        }
        else if (PositionValue == "Auto") {
            LegendValue = LegendPosition.Auto;
        }
    }
    private void LegendAlignmentList(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropdownList> args) {
        AlignmentValue = (args.Value).ToString();
        if (AlignmentValue == "Center") {
            LegendAlignValue = Alignment.Center;
        }
        else if (AlignmentValue == "Far") {
            LegendAlignValue = Alignment.Far;
        }
        else if (AlignmentValue == "Near") {
            LegendAlignValue = Alignment.Near;
        }
    }
    private void ShapeList(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropdownList> args) {
        ShapeValue = (args.Value).ToString();
        if (ShapeValue == "Circle") {
            LegendShapeValue = GaugeShape.Circle;
        }
        else if (ShapeValue == "Rectangle") {
            LegendShapeValue = GaugeShape.Rectangle;
        }
        else if (ShapeValue == "Triangle") {
            LegendShapeValue = GaugeShape.Triangle;
        }
        else if (ShapeValue == "Diamond") {
            LegendShapeValue = GaugeShape.Diamond;
        }
        else if (ShapeValue == "Inverted Triangle") {
            LegendShapeValue = GaugeShape.InvertedTriangle;
        }
    }
}

